<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title></title>
<style>
	body{
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #f8f005;
	}
	button,button::after{
		width: 380px;
		height: 86px;
		font-size: 36px;
		font-family: 'Bebas Neue',cursive;
		background : linear-gradient(45deg,transparent 5%,#FF013C 5%);
		border: 0;
		color: #fff;
		letter-spacing: 3px;
		line-height: 88px;
		box-shadow: 6px 0px 0px #00E6F6;
		outline: transparent;
		position: relative;
	}
	button::after{
		--slice-0:inset(50% 50% 50% 50%);
		--slice-1:inset(80% -6px 0 0);
		--slice-2:inset(50% -6px 30% 0);
		--slice-3:inset(10% -6px 85% 0);
		--slice-4:inset(40% -6px 43% 0);
		--slice-5:inset(80% -6px 5% 0);
		
		content: 'AVAILABLE NOW';
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		bottom: 0;
		background: linear-gradient(45deg,transparent 3%,#00e6f6 3%,#00e6f6 5%,#ff013c 5%);
		text-shadow: -3px -3px 0px #F8F005,3px 3px 0px #00E6F6;
		clip-path: var(--slice-1);
		transform: translate(-20px,10px);
		
	}
	
	@keyframes glitch{
		0% {
			clip-path: var(--slice-1);
			transform: translate(-20px, -10px);
		}

		10% {
			clip-path: var(--slice-3);
			transform: translate(10px, 10px);
		}

		20% {
			clip-path: var(--slice-1);
			transform: translate(-10px, 10px);
		}

		30% {
			clip-path: var(--slice-3);
			transform: translate(0px, 5px);
		}

		40% {
			clip-path: var(--slice-2);
			transform: translate(-5px, 0px);
		}

		50% {
			clip-path: var(--slice-3);
			transform: translate(5px, 0px);
		}

		60% {
			clip-path: var(--slice-4);
			transform: translate(5px, 10px);
		}

		70% {
			clip-path: var(--slice-2);
			transform: translate(-10px, 10px);
		}

		80% {
			clip-path: var(--slice-5);
			transform: translate(20px, -10px);
		}

		90% {
			clip-path: var(--slice-1);
			transform: translate(-10px, 0px);
		}

		100% {
			clip-path: var(--slice-1);
			transform: translate(0);
		}
	}
		
		
	
	
		
	button:hover::after{
		
		-webkit-animation:glitch 1s; /* Safari and Chrome */
		animation:glitch 1s;
		
		animation-timing-function : steps(2, end);
	}
	
	
</style>

<link rel="stylesheet" href="">
</head>
<body>
	
	<button>AVAILABLE NOW</button>

</body>
</html>
